@import '../../../utils.less';

.ui-admin-config {
  padding: 20px 40px 20px 30px;
  background-color: @bg-2;

  .ui-admin-config-top {
    display: flex;
    justify-content: center;

    .main {
      width: 1000px;

      .subtitle {
        align-items: center;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
        color: @color-2;

        &:before {
          content: '';
          display: inline-flex;
          width: 6px;
          height: 18px;
          margin-right: 10px;
          background: @primary-color;
        }
      }
      .body {
        .left-info {
          margin-right: 40px;

          .logo-area {
            align-items: center;

            .logo {
              float: right; 
              width: 70px; 
              height: 70px;
              margin-left: 30px;
            }
          }
          p {
            color: @color-3;
          }
          .set-image-area {
            margin-top: 20px;
            align-items: center;

            .default-logo {
              margin-left: 25px;
            }
          }
          .company-name {
            margin-top: 40px;
            margin-bottom: 10px;
          }
          .select-color-area {
            margin-top: 34px;
            
            .default-color {
              margin-top: 20px;
              justify-content: space-between;

              .color-selector {
                width: 310px;
                .select-bar {
                  width: 120px;
                  align-items: center;
                  .color-bar {
                    margin-left: 7px;
                  }
                }
                .ivu-select-item {
                  align-items: center;
                }
                .color-bar {
                  width: 48px;
                  height: 18px;
                  margin-right: 8px;
                  margin-left: -4px;
                }
              }
              .color-custom {
                width: 310px;
              }
              .color-tip {
                margin-left: 15px;
                margin-top: 4px;
              }
              .color-symbol {
                margin-right: 6px;
                font-size: 14px; 
              }
            }
          }
          .custom-color {
            margin: 20px 40px 0px 0px;
            justify-content: space-between;
          }
          .upload {
            justify-content: space-between;
          }
        }
        .right-info {
          padding: 0px 20px;
          border-left: 1px solid black;
          width: 460px;
          height: 360px;
          justify-content: center;

          .right-preview-title {
            margin-bottom: 26px;
          }
          .right-image-area {
            border: 10px solid black;
            width: 440px;
            height: 280px;
            background-color: white;
            overflow-y: hidden;

            .right-image {              
              .ui-s-frame {
                height: auto;
              }
              .image-preview {
                margin-top: -190px;
                margin-left: -40px;
                transform: scale(0.4);
              }
              .cover-image-preview {
                position: absolute;
                left:850px;
                top:210px;
                width: 300px;
                height: 250px;
              }
            }
          }

          .preview {
            display: flex;
            justify-content: center;
            margin-top: 14px;
          }
        }
      }
    }
  }
  .ui-admin-config-save {
    display: flex;
    justify-content: center;
    .button-area {
      width: 1000px;
      .save-button {
        margin: 83px 0 0 440px;
        width: 74px;
      }
      .go-to-accountconfig {
        margin: 20px 0 0 435px;
      }
    }
  }
  
}
.ui-admin-config-preview-model {
  .ivu-modal-content {
    border-radius: 0px;
    overflow-x: visible;
    .ivu-modal-close {
      margin: -32px -80px 0px 0px;

      .ivu-icon-ios-close {
        font-size: 70px;
      }
    }
  }
  .ivu-modal-body {
    display: flex;
    padding: 0px;
    .ui-admin-config-preview-large {
      width: 1257px;
      height: 800px;
    }
    .ui-admin-config-login-cover {
      position: fixed;
      left: 0;
      top: 200px;
      bottom: 0;
      right: 0;
      z-index: 1000;
    }
  }
}



